<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <audio controls
        src="http://m8.music.126.net/20200326182659/f70dbe5e08dc52dea06e10174572ef1f/ymusic/0fd6/4f65/43ed/a8772889f38dfcb91c04da915b301617.mp3"></audio>
    <div style="width: 100vw;height: 70vh;border: 1px solid black;box-sizing: border-box;position: relative;">
        <div id="lycContainer" style="position: absolute;height:300px;top: 100px;">
            
        </div>
    </div>
    <script>
        const formatLrc = (value) => {
            const arr = value.split("\n");
            const reg = new RegExp(/\[[^\]]*\]/, 'g');
            let reArr = [];
            let needSort = false;
            arr.forEach(ele => {
                const times = ele.match(reg) || [];
                if (times.length > 1) needSort = true;
                times.forEach(time => {
                    if (time && ele.replace(times.join(''), '').trim() != '') {
                        const handleTime = time.trim().slice(1, -1).split(':');
                        reArr.push({
                            time: Math.floor(handleTime[0] * 60) + Math.floor(handleTime[1]),
                            lrc: ele.replace(times.join(''), '').trim()
                        })
                    }
                })
            })
            function insertionSort(myArray) {
                let len = myArray.length,     // 数组的长度
                    value,                      // 当前比较的值
                    i,                          // 未排序部分的当前位置
                    j;                          // 已排序部分的当前位置 
                for (i = 0; i < len; i++) {
                    value = myArray[i];
                    for (j = i - 1; j > -1 && myArray[j].time > value.time; j--) {
                        myArray[j + 1] = myArray[j];
                    }
                    myArray[j + 1] = value;
                }
                return myArray;
            }
            if (needSort) {
                return insertionSort(reArr);
            } else {
                return reArr;
            }
        }
        async function getLyc() {
            let res = await fetch("http://47.98.229.148:3000/lyric?id=33894312");
            let resjson = await res.json();
            let lrc = resjson.lrc.lyric;
            return formatLrc(lrc)
        }
        getLyc().then(res => {
            const audio = document.getElementsByTagName("audio")[0];
            const lycContainer = document.getElementById("lycContainer");
            for(let i = 0;i < res.length;i++){
                lycContainer.innerHTML += `<p style="height:30px;border:1px solid black;line-height:30px;text-align:center">${res[i].lrc}</p>`
            }
            lycContainer.style.top += parseInt( lycContainer.style.top) - 30 + "px"
            audio.ontimeupdate = (e) => {
                   
                console.log(audio.currentTime)
                let curTime = audio.currentTime;
                for(let i = 0;i < res.length;i++){
                    if(curTime > res[i].time){
                        // lycContainer.style.transform("ta")
                        // lycContainer.style.transform = " translate(0 30px)"
                        lycContainer.style.top = parseInt(lycContainer.style.top) - 3 + "px";
                        console.log(lycContainer.style.top)
                        break;
                    }
                }
            }
        })


        // console.log(lycarr)

    </script>
</body>

</html>